<template>
  <div class="about pt-3">
    <!-- 商品详情 -->
    <button @click="back" class="ms-5" style="width: 100px;
    height: 50px;
    background-color: #93d2f3;
    border-radius: 10px;
    color: white;
    border: none;">返回</button>
    <div class="row justify-content-center">
      <div class="col-5 row">
        <div class="spec-preview col-12 p-0">
        <!-- //图片地址 -->
          <img :src="goodsabout.goodsimg" alt="" class="p-0">
          <!-- //定义鼠标事件 -->
          <div class="event" @mousemove="handler"></div>
          <!-- //定义放大后的图样式 -->
          <div class="big">
          <!-- //放大后的图的原始图片 -->
            <img :src="goodsabout.goodsimg" ref="big" />
          </div>
          <!-- 遮罩层 -->
          <div class="mask" ref="mask"></div>
        </div>
        <h4>{{goodsabout.goodsname}}</h4>
        <div class="text-end">
          <sapn>     浏览：{{goodsabout.browse}}</sapn>
          <span>     销量：{{goodsabout.salebrowse}}</span>
          <span>     好评：{{goodsabout.reception}}</span>
        </div>
      </div>
      <div class="col-5 pt-5">
        <ul>
          <li>
            价格：
            <h6 class="ms-5"> 原价：{{goodsabout.marketPrice}}/件</h6>
            <h5 class="ms-5">现价：{{goodsabout.goodsprice}}/件</h5> 
          </li>
          <li>
            发货地：
            <h5 class="ms-5">{{goodsabout.goodsaddress}}</h5> 
          </li>
          <li>
            库存：
            <h5 class="ms-5">{{goodsabout.goodsrepertory}}件</h5>
          </li>
          
        </ul>
        <h5>-----------尺码齐全      价格适中     质量保障      不满意包退-----------</h5>
        <br>
        <div class="row sel">
          <div class="col-8 row">
            <span class="col-3 text-end">
              尺码 
            </span>
            <select :v-model="value" class="col-7">
            <option value="s">s</option>
            <option value="m">m</option>
            <option value="l">l</option>
            <option value="xl">xl</option>
          </select>
          </div>
          
          <div class="col-8 row mt-2">
            <span class="col-3 text-end">
              数目 
            </span>
            <div class="col-7 p-0">
              <button @click="decrement">-</button>
              <input type="text" v-model="goodsabout.count">
              <button @click="increment">+</button>
            </div>
            
          </div>
        </div>
        <br>
        <div class="mt-5 button">
          <button @click="add(goodsabout)">加入购物车</button> <button  @click="pay(goodsabout)">立即购买</button>
        </div>
        
      </div>
    </div>
    
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      goodsabout:{}
    }
  },
  created(){
    this.goodsabout=JSON.parse(this.$route.params.id) 
  },
  methods:{
    pay(x){
      if(!this.$store.state.userInfo.username){
        alert('请先登录再进行购买！')
        this.$router.push({
            path: '/login'
        })
      } else{
        this.$router.push({
            name:"order",
            params:{
              id:JSON.stringify(x)
            }
        })
      }
      
        
    },
     handler(event) {
      const mask = this.$refs.mask;
      const big = this.$refs.big;
      let left = event.offsetX - mask.offsetWidth / 2;
      let top = event.offsetY - mask.offsetHeight / 2;
      if (left <= 0) left = 0;
      if (left >= mask.offsetWidth) left = mask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= mask.offsetHeight) top = mask.offsetHeight;
      mask.style.left = left + "px";
      mask.style.top = top + "px";
      big.style.left = -2 * left + "px";
      big.style.top = -2 * top + "px";
      // console.log(left);
    },
    decrement(){
        if((this.goodsabout.count-1)>0){
            this.goodsabout.count-=1
        }
    },
    increment(){
      if(this.goodsabout.goodsrepertory>this.goodsabout.count){
        this.goodsabout.count+=1
      }
        
    },
    add(x){
      if(!this.$store.state.userInfo.username){
        alert("请先登录！")
          this.$router.push({
              path: '/login'
          })
      }else{
        this.$router.push({
            name:"cart",
            params:{
              id:JSON.stringify(x)
            }
        })
      }
      
    },
    back(){
        this.$router.go(-1)
    }
  }


}
</script>

<style scoped>
  .spec-preview {
    position: relative;
    height: 600px;
    border: 1px solid #ccc;
  }
 .spec-preview img {
    width: 100%;
    height: 100%;
  }

  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }

  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(171, 250, 171, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;
  }
   .big img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
  

  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }

.about li{
  list-style: none;
}
.about h6{
  text-decoration: line-through;
}
.about .sel select{
  width: 180px;
  height: 50px;
  
}
.about .sel option{
  width: 100px;
  text-align: center;
}
.about .sel input{
  width: 120px;
    height: 50px;
    border: 2px solid #CECECE;
    text-align: center;
  }
 .about .sel input:focus{
    outline: 0;
    border: 2px solid gray;
  }
 .about .sel button{
    height: 50px;
    width: 30px;
    background-color: white;
    border: 2px solid #93d2f3;
  }
 .about .sel button:hover{
    background-color: #93d2f3;
    color: white;
  }
  .about .sel span{
    line-height: 50px;
  }
  .about .button button{
    width: 200px;
    height: 50px;
    padding: 5px;
    margin-left: 5px;
    border-radius: 50px;
    background-color: white;
    border: 2px solid #93d2f3;
  }
  .about .button button:hover{
    background-color: #93d2f3;
    color: white;
  }
  
  
</style>




